
<script setup>
import { reactive } from 'vue';
	const form = reactive({
		bookname: "",
		author: "",
		publisher: "",
		creator: ""
	})
	
	const onSubmit = () => {
		uni.request({
			method: 'POST',
			url: "https://hmajax.itheima.net/api/books",
			data: form
		})
	}
</script>
<template>
	<view class="form">
		<image class="book-image" src="../../static/logo.png" mode=""></image>
		<view class="form-item row">
			<text>图书名称</text>
			<input v-model="form.bookname" type="text" placeholder="请输入图书名称"/>
		</view>
		<view class="form-item row">
			<text>图书作者</text>
			<input v-model="form.author" type="text" placeholder="请输入图书作者"/>
		</view>
		<view class="form-item row">
			<text>图书出版社</text>
			<input v-model="form.publisher" type="text" placeholder="请输入图书出版社"/>
		</view>
		<view class="form-item row">
			<text>创建者</text>
			<input v-model="form.creator" type="text" placeholder="请输入创建者"/>
		</view>
		<button @click="onSubmit()" type="primary" size="default">新增图书</button>
	</view>
</template>

<style lang="scss">
	.form {
		text-align: center;
		font-size: 36rpx;
		.book-image {
			width: 200rpx;
			height: 200rpx;
		}
			
		.form-item {
			margin: 10rpx 70rpx;
			border-bottom: 1rpx solid #ccc;
			text {
				width: 200rpx;
				text-align: right;
			}
		}
	}
</style>
